<template>
  <!-- 知识可视化 drawer -->
  <div class="entity-view-component">
    <navMenu @selectValue="selectValue" :activeIndex="tabs"></navMenu>
    <section
      class="self-scroll view-detail"
      v-if="tabs === 'detail' && entityId"
    >
      <div class="view-detail-content self-scroll">
        <div class="entity" style="padding-top: 20px">
          <div v-if="isView" class="name-content">
            <div class="vertial-center">
              <span class="entity-name" style="color: #999999">实体:</span>
              <span class="content-style" v-if="form.entityStatus == 0">{{
                form.entityName
              }}</span>
              <el-image
                v-if="form.entityStatus == 1"
                style="
                  width: 72px;
                  height: 72px;
                  text-align: center;
                  margin-bottom: 20px;
                  border: 1px solid #dcdfe6;
                "
                :src="form.entityName"
                :preview-src-list="[form.entityName]"
                fit="fill"
              >
                <i
                  slot="error"
                  class="image-slot"
                  style="color: rgb(220, 223, 230); font-size: 12px"
                >
                  暂无图片
                </i>
              </el-image>
            </div>
          </div>
          <div class="entity-edit" v-else>
            <div class="edit-inner">
              <span style="color: #999999">实体1:</span>
              <el-input
                v-if="form.entityStatus == 0"
                v-model="form.entityName"
                placeholder=""
                class="name-edit-input"
              ></el-input>
              <div v-if="form.entityStatus == 1">
                <el-upload
                  ref="upload"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :on-remove="handleRemove"
                  :show-file-list="false"
                  :on-success="handleEntitySuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="form.entityName"
                    :src="form.entityName"
                    class="avatar"
                    style="width: 72px; height: 72px"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <el-button
                    size="small"
                    type="primary"
                    class="reupload"
                    v-if="form.entityName"
                    >重新上传</el-button
                  >
                </el-upload>
              </div>
            </div>
          </div>
        </div>
        <div class="model">
          <div v-if="isView" class="name-content">
            <div class="vertial-center">
              <span class="entity-name" style="color: #999999">实体模态:</span>
              <span class="content-style">{{
                form.entityStatus == 0 ? "文本" : "图片"
              }}</span>
            </div>
          </div>
          <div class="name-edit" v-else>
            <div>
              <span style="color: #999999">实体模态:</span>
              <el-radio-group
                v-model="form.entityStatus"
                @change="handleStatusChange"
              >
                <el-radio :label="0">文本</el-radio>
                <el-radio :label="1">图片</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="type">
          <div class="type-edit vertial-center">
            <span class="text-all" style="color: #999999">实体类型:</span>
            <el-cascader
              ref="myCascader1"
              :disabled="isView"
              :show-all-levels="false"
              v-model="form.ontologyId"
              placeholder=""
              @change="hidePanelDom"
              :props="{ checkStrictly: true, emitPath: false }"
              :options="optionsType"
              filterable
            >
            </el-cascader>
          </div>
        </div>
        <div class="name">
          <div v-if="isView" class="name-content">
            <div class="vertial-center">
              <span
                class="entity-name"
                style="margin-right: 24px; color: #999999"
                >标识码:</span
              >
              <span class="content-style">{{ form.targetNumber }}</span>
            </div>
          </div>
          <div class="name-edit" v-else>
            <div>
              <span style="margin-right: 24px; color: #999999">标识码:</span>
              <el-input
                v-model="form.targetNumber"
                placeholder=""
                class="name-edit-input"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="confidence">
          <div v-if="isView" class="vertial-center">
            <span class="text-all" style="margin-right: 24px; color: #999999"
              >置信度:</span
            >
            <span class="content-style">{{ form.confidence }}</span>
          </div>
          <div class="confidence-edit" v-else>
            <span style="margin-right: 24px; color: #999999">置信度:</span>
            <el-input
              v-model="form.confidence"
              placeholder=""
              class="confidence-edit-input"
              @input="formatCheck"
            >
            </el-input>
          </div>
        </div>
        <div class="name" style="margin-bottom: 14px">
          <div v-if="isView" style="font-weight: normal">
            <span
              style="
                width: 100%;
                display: inline-block;
                margin-bottom: 8px;
                color: #999999;
              "
              >消岐标识:</span
            >
            <div
              class="remark-con"
              style="display: flex; flex-wrap: wrap"
              v-if="form.remark.length"
            >
              <div
                class="remark-item-con one-row-text"
                v-for="item in form.remark"
                :key="item"
              >
                {{ item }}
              </div>
            </div>
            <div
              style="margin-left: 8px; font-size: 14px; color: #bfbfbf"
              v-else
            >
              暂无数据
            </div>
          </div>
          <div v-else>
            <div class="name-remark" style="color: #999999">消岐标识:</div>
            <div class="content-remark">
              <div
                v-for="(item, index) in form.remark"
                :key="index"
                class="remark-item"
              >
                <el-input
                  v-model="form.remark[index]"
                  placeholder=""
                  class="remark remark-edit-con"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-close"
                    @click="deleteRemark(index)"
                  ></i>
                </el-input>
              </div>
              <div class="add-remark" @click="addRemark">
                <i class="el-icon-circle-plus-outline"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="details">
          <div v-if="isView">
            <span style="color: #999999"
              >实体简介:
              <div
                style="
                  margin-top: 10px;
                  padding: 5px;
                  background: #f3f4f8;
                  color: #333333;
                "
                :class="!isAll ? 'descri' : ''"
              >
                {{ this.form.details || "暂无内容" }}
              </div></span
            >
            <span v-if="this.form.details && this.form.details.length >= 53">
              <span class="all" @click="isDescriAll" v-if="!isAll"
                >显示全部>></span
              >
              <span class="all" @click="isDescriAll" v-else>收起>></span>
            </span>
          </div>
          <div v-else class="details-edit">
            <span style="color: #999999">实体简介:</span>
            <el-input
              type="textarea"
              :rows="3"
              maxlength="500"
              placeholder="请输入内容"
              v-model="form.details"
            >
            </el-input>
          </div>
        </div>
        <div class="picture">
          <div class="title" style="color: #999999">缩略图1:</div>
          <el-image
            v-if="isView"
            style="
              width: 72px;
              height: 72px;
              text-align: center;
              line-height: 72px;
              border: 1px solid #dcdfe6;
            "
            :src="form.fileId"
            fit="fill"
          >
            <i
              slot="error"
              class="image-slot"
              style="color: rgb(220, 223, 230); font-size: 12px"
            >
              暂无图片
            </i>
          </el-image>
          <div v-else>
            <el-upload
              ref="upload"
              class="avatar-uploader"
              :action="uploadUrl"
              :on-remove="handleRemove"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="form.fileId"
                :src="form.fileId"
                class="avatar"
                style="width: 72px; height: 72px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <i
                class="el-icon-error cancelUpload"
                @click.stop="cancelUpload"
                v-if="form.fileId"
              ></i>
              <el-button
                size="small"
                type="primary"
                class="reupload"
                v-if="form.fileId"
                >重新上传</el-button
              >
            </el-upload>
          </div>
        </div>
        <div class="table">
          <div class="property">
            <span>属性信息:</span>
            <div
              style="color: #4b71eb; cursor: context-menu"
              @click="addProperty"
              v-if="!isView"
            >
              <i
                class="el-icon-plus"
                style="font-size: 12px; margin-right: 6px"
              ></i
              ><i>新增</i>
            </div>
          </div>
          <el-table
            class="property-table"
            :data="tableData"
            :header-cell-style="{
              background: 'rgba(61, 96, 212, 0.12)',
              height: '36px',
              color: '#333333',
            }"
            :border="true"
            max-height="218px"
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column prop="propertyName" label="属性">
            </el-table-column>
            <el-table-column
              prop="propertyValue"
              label="属性值"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <img
                  style="height: 40px"
                  v-if="scope.row.propertyType == 'image'"
                  :src="scope.row.propertyValue"
                />
                <span v-else>{{ scope.row.propertyValue }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="!isView"
              label="操作"
              align="center"
              width="80"
            >
              <template slot-scope="scope">
                <i
                  class="el-icon-edit"
                  @click="nodeEditScope(scope.row, scope.$index)"
                  style="margin-right: 16px"
                ></i>
                <el-popconfirm
                  title="确定删除吗？"
                  @confirm="deleteConfirm(scope.row, scope.$index)"
                  @cancel="deleteCancel"
                >
                  <i class="el-icon-delete" slot="reference"></i>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div class="source_all" v-if="entitySourceSize">
            <div class="source">
              <div class="source_title">实体溯源</div>
              <div class="source_num">来源数量:{{ entitySourceSize }}</div>
            </div>
            <div
              class="source"
              v-for="(item, index) in entitySourceList"
              :key="index"
            >
              <div class="file_name">{{ index + 1 }}. {{ item.fileName }}</div>
              <div class="operation">
                <el-link
                  :underline="false"
                  type="primary"
                  class="form-action"
                  :href="`${
                    $api.knowledgeMap.downloadSourceFile
                  }?fileUrl=${item.fileUrl.replace(/\\/g, '/')}&fileName=${
                    item.fileName
                  }`"
                >
                  下载</el-link
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn btn-edit" v-if="isView" @click="editEntity">编辑</div>
      <div class="btn" v-else @click="saveEntitythrottle">保存</div>
    </section>
    <section
      class="self-scroll view-detail"
      v-if="tabs === 'detail' && !entityId"
    >
      <div class="view-detail-content self-scroll">
        <!-- <div class="entity">
          <div class="entity-edit">
            <div class="edit-inner">
              <span style="color: #999999">实体2:</span>
              <el-input
                v-if="form.entityStatus == 0"
                v-model="form.entityName"
                placeholder=""
                class="name-edit-input"
              ></el-input>
              <div v-if="form.entityStatus == 1">
                <el-upload
                  ref="upload"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :on-remove="handleRemove"
                  :show-file-list="false"
                  :on-success="handleEntitySuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="form.entityName"
                    :src="form.entityName"
                    class="avatar"
                    style="width: 72px; height: 72px"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <el-button
                    size="small"
                    type="primary"
                    class="reupload"
                    v-if="form.entityName"
                    >重新上传</el-button
                  >
                </el-upload>
              </div>
            </div>
          </div>
        </div> -->
        <div class="">
          <div class="entity-edit">
            <div class="">
              <el-form ref="form" :model="form" label-width="100px" label-suffix=":" label-position="left">
                <el-form-item
                  label="实体"
                  :rules="{
                    required: true,
                    message: '请输入图谱名称',
                    trigger: ['change', 'blur'],
                  }"
                  prop="entityName"
                >
                  <el-input v-model="form.entityName"></el-input>
                </el-form-item>
              </el-form>
              <div v-if="form.entityStatus == 1">
                <el-upload
                  ref="upload"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :on-remove="handleRemove"
                  :show-file-list="false"
                  :on-success="handleEntitySuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="form.entityName"
                    :src="form.entityName"
                    class="avatar"
                    style="width: 72px; height: 72px"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <el-button
                    size="small"
                    type="primary"
                    class="reupload"
                    v-if="form.entityName"
                    >重新上传</el-button
                  >
                </el-upload>
              </div>
            </div>
          </div>
        </div>
        <div class="">
          <!-- <div v-if="isView" class="name-content">
            <div class="vertial-center">
              <span class="entity-name" style="color: #999999">实体模态:</span>
              <span class="content-style">{{
                form.entityStatus == 0 ? "文本" : "图片"
              }}</span>
            </div>
          </div> -->
          <!-- <div class="name-edit">
            <div>
              <span style="color: #999999">实体模态111:</span>
              <el-radio-group
                v-model="form.entityStatus"
                @change="handleStatusChange"
              >
                <el-radio :label="0">文本</el-radio>
                <el-radio :label="1">图片</el-radio>
              </el-radio-group>
            </div>
          </div> -->
          <el-form ref="form" :model="form" label-width="100px" label-suffix=":" label-position="left">
            <el-form-item
              label="实体模态"
              :rules="{
                required: true,
                message: '请选择实体模态',
                trigger: ['change', 'blur'],
              }"
              prop="entityStatus"
            >
              <el-radio-group
                v-model="form.entityStatus"
                @change="handleStatusChange"
              >
                <el-radio :label="0">文本</el-radio>
                <el-radio :label="1">图片</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div class="">
          <!-- <div class="type-edit">
            <span class="text-all" style="color: #999999">实体类型:</span>
            <el-cascader
              ref="myCascader"
              v-model="form.ontologyId"
              placeholder=""
              @change="hidePanelDom"
              :props="{ checkStrictly: true, emitPath: false }"
              :options="optionsType"
              :show-all-levels="false"
              filterable
            >
            </el-cascader>
          </div> -->
          <el-form ref="form" :model="form" label-width="100px" label-suffix=":" label-position="left">
            <el-form-item
              label="实体类型"
              :rules="{
                required: true,
                message: '请选择实体类型',
                trigger: ['change', 'blur'],
              }"
              prop="ontologyId"
            >
              <el-cascader
                ref="myCascader"
                v-model="form.ontologyId"
                placeholder=""
                @change="hidePanelDom"
                :props="{ checkStrictly: true, emitPath: false }"
                :options="optionsType"
                :show-all-levels="false"
                filterable
              >
              </el-cascader>
            </el-form-item>
          </el-form>
        </div>
        <div class="">
          <!-- <div class="name-edit">
            <div>
              <span style="margin-right: 24px; color: #999999">标识码:</span>
              <el-input
                v-model="form.targetNumber"
                placeholder=""
                class="name-edit-input"
              ></el-input>
            </div>
          </div> -->
          <el-form ref="form" :model="form" label-width="100px" label-suffix=":" label-position="left">
            <el-form-item
              label=" 标识码"
              prop="targetNumber"
            >
              <el-input
                v-model="form.targetNumber"
                placeholder=""
                class="name-edit-input"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="">
          <div class="confidence-edit">
            <!-- <span style="margin-right: 24px; color: #999999">置信度:</span>
            <el-input
              v-model="form.confidence"
              placeholder=""
              @input="formatCheck"
              class="confidence-edit-input"
            >
            </el-input> -->
          <el-form ref="form" :model="form" label-width="100px" label-suffix=":" label-position="left">
            <el-form-item
              label=" 置信度"
              prop="confidence"
              :rules="{
                required: true,
                message: '请填写置信度',
                trigger: ['change', 'blur'],
              }"
            >
              <el-input
                v-model="form.confidence"
                placeholder=""
                class="name-edit-input"
              ></el-input>
            </el-form-item>
          </el-form>
          </div>
        </div>
        <div class="name">
          <div>
            <div class="name-remark" style="color: #999999">消岐标识:</div>
            <div class="content-remark">
              <div
                v-for="(item, index) in form.remark"
                :key="index"
                class="remark-item"
              >
                <el-input
                  v-model="form.remark[index]"
                  placeholder=""
                  class="remark remark-edit-con"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-close"
                    @click="deleteRemark(index)"
                  ></i>
                </el-input>
              </div>
              <div class="add-remark" @click="addRemark">
                <i class="el-icon-circle-plus-outline"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="picture">
          <div class="title" style="color: #999999">缩略图2:</div>
          <div>
            <el-upload
              ref="upload"
              class="avatar-uploader"
              :action="uploadUrl"
              :on-remove="handleRemove"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="imgUrl"
                :src="imgUrl"
                class="avatar"
                style="width: 72px; height: 72px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <i
                class="el-icon-error cancelUpload"
                @click.stop="cancelUpload"
                v-if="imgUrl"
              ></i>
              <el-button
                size="small"
                type="primary"
                class="reupload"
                v-if="imgUrl"
                >重新上传</el-button
              >
            </el-upload>
          </div>
        </div>
        <div class="details">
          <div class="details-edit">
            <span style="color: #999999">实体简介:</span>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="form.details"
            >
            </el-input>
          </div>
        </div>
        <div class="table">
          <div class="property">
            <span>属性信息:</span>
            <div
              style="color: #4b71eb; cursor: context-menu"
              @click="addProperty"
            >
              <i
                class="el-icon-plus"
                style="font-size: 12px; margin-right: 6px"
              ></i
              ><i>新增</i>
            </div>
          </div>
          <el-table
            :data="tableData"
            class="property-table"
            :header-cell-style="{
              background: 'rgba(61, 96, 212, 0.12)',
              height: '36px',
              color: '#333333',
            }"
            :border="true"
            max-height="218px"
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column prop="propertyName" label="属性">
            </el-table-column>
            <el-table-column
              prop="propertyValue"
              label="属性值"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <img
                  style="height: 40px"
                  v-if="scope.row.propertyType == 'image'"
                  :src="scope.row.propertyValue"
                />
                <span v-else>{{ scope.row.propertyValue }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              class="handdle"
              align="center"
              width="80"
            >
              <template slot-scope="scope">
                <i
                  class="el-icon-edit"
                  @click="nodeEditScope(scope.row, scope.$index)"
                  style="margin-right: 16px"
                ></i>
                <!-- <i
                  class="el-icon-delete"
                  slot="reference"
                  @click="deleteConfirm(scope.row, scope.$index)"
                ></i> -->
                <el-popconfirm
                  title="确定删除吗？"
                  @confirm="deleteConfirm(scope.row, scope.$index)"
                  @cancel="deleteCancel"
                >
                  <!-- <el-link :underline="false" type="primary" v-popover:popover slot="reference">删除</el-link> -->
                  <i class="el-icon-delete" slot="reference"></i>
                </el-popconfirm>
                <!-- <i v-else style="width: 14px; display: inline-block"></i> -->
                <!--TODO: 解决表格不同行按钮对不齐问题 -->
                <!-- <el-link :underline="false" @click="nodeDelScope(scope.row, scope.$index)" type="primary" v-popover:popover>删除</el-link> -->
              </template>
            </el-table-column>
          </el-table>
          <div class="source_all" v-if="entity">
            <div class="source">
              <div class="source_title">实体溯源</div>
              <div class="source_num">来源数量:{{ entitySourceSize }}</div>
            </div>
            <div
              class="source"
              v-for="(item, index) in entitySourceList"
              :key="index"
            >
              <div
                style="
                  width: 330px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ item.fileName }}
              </div>
              <!-- <el-link :underline="false" type="primary" class="download" :href="'//' + item.fileUrl"
                :download="item.fileName">下载</el-link> -->
              <el-link
                :underline="false"
                type="primary"
                class="form-action"
                :href="`${
                  $api.knowledgeMap.downloadSourceFile
                }?fileUrl=${item.fileUrl.replace(/\\/g, '/')}&fileName=${
                  item.fileName
                }`"
              >
                下载</el-link
              >
            </div>
          </div>
        </div>
      </div>
      <div class="handle" style="display: flex">
        <div
          class="btn btn-edit"
          @click="cancelNewEntity"
          style="margin-right: 0; flex: 1"
        >
          取消
        </div>
        <div class="btn" @click="saveEntitythrottle" style="flex: 2">保存</div>
      </div>
    </section>
    <section class="view-select" v-if="tabs === 'select'">
      <select-com :projectId="projectId" :Neo4j="Neo4j"></select-com>
    </section>
    <section class="view-config" v-show="tabs === 'config'">
      <!-- <configCom></configCom> -->
      <!-- 颜色配置 -->
      <graph-config
        @changeGraphConfig="changeGraphConfig"
        @saveConfig="saveConfig"
        ref="graphConfig"
        @changeNodeTextSize="changeNodeTextSize"
        @changeEdgeTextSize="changeEdgeTextSize"
        @changePropertyColor="changePropertyColor"
        @changePropertyStyle="changePropertyStyle"
      ></graph-config>
    </section>

    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      width="560px"
      :show-close="false"
      class="common-dialog map-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
    >
      <el-form
        :model="property"
        :rules="propertyRules"
        ref="mydialogForm"
        label-position="right"
        label-width="100px"
      >
        <el-form-item
          label="属性名:"
          prop="propertyName"
          class="dialog-inline"
          :rules="{
            required: true,
            message: '请输入属性名',
            trigger: 'change',
          }"
        >
          <el-input
            style="width: 80%"
            v-model.trim="property.propertyName"
            @input="changePropVal"
          ></el-input>
          <span
            style="margin-left: 20px; cursor: pointer; color: #6f8def"
            @click="bindOntologyProp"
            >去选择</span
          >
        </el-form-item>
        <el-form-item
          label="属性值类型:"
          prop="propertyType"
          class="dialog-inline"
          v-if="editIsProperty"
          :rules="{
            required: true,
            validator: validateType,
            trigger: 'change',
          }"
        >
          <el-select
            v-model="property.propertyType"
            @change="changePropertyType"
            style="width: 80%"
          >
            <el-option
              v-for="item in propertyTypeOptions"
              :key="item.key"
              :value="item.key"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="属性值:"
          prop="propertyValue"
          class="dialog-inline"
          :rules="[
            {
              required: true,
              validator: validatePass,
              trigger: ['change', 'blur'],
            },
          ]"
        >
          <!-- 枚举值类型 -->
          <el-select
            v-if="property.propertyBind == 'enum'"
            v-model="property.propertyValue"
            style="width: 80%"
          >
            <el-option
              v-for="(eItem, index) in property.enumNames"
              :key="index"
              :label="eItem"
              :value="eItem"
            ></el-option>
          </el-select>
          <!-- 非枚举值 -->
          <template v-else>
            <!-- 字符 数字类型 坐标 或没有设置类型 都是input输入框 -->
            <el-input
              style="width: 80%"
              v-if="
                property.propertyType == 'text' ||
                property.propertyType == 'int' ||
                property.propertyType == 'float' ||
                !property.propertyType
              "
              type="input"
              v-model.trim="property.propertyValue"
              placeholder="请输入属性值"
            ></el-input>
            <!-- 日期格式 -->
            <el-date-picker
              style="width: 80%"
              v-if="property.propertyType == 'date'"
              :picker-options="
                pickerOptions(property.startRange, property.endRange)
              "
              v-model="property.propertyValue"
              align="right"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              :clearable="false"
            >
            </el-date-picker>
            <!-- 时间格式 -->
            <el-date-picker
              v-if="property.propertyType == 'datetime'"
              style="width: 80%"
              v-model="property.propertyValue"
              type="datetime"
              :picker-options="
                pickerOptions(property.startRange, property.endRange)
              "
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              :clearable="false"
            >
            </el-date-picker>
            <!-- 坐标 -->
            <span v-if="property.propertyType == 'coordinate'"
              >经度：<el-input
                style="width: 25%; margin-right: 10px"
                v-model="property.coordX"
              ></el-input
              >维度：<el-input
                style="width: 25%"
                v-model="property.coordY"
              ></el-input
            ></span>
            <!-- 图片和文件 -->
            <el-upload
              v-if="
                property.propertyType == 'image' ||
                property.propertyType == 'file'
              "
              class="upload-demo"
              ref="uploadRef"
              :auto-upload="false"
              :show-file-list="false"
              action="#"
              :on-change="handleUploadChang"
              :on-exceed="handleExceed"
            >
              <el-button size="small" type="primary">上传</el-button>
            </el-upload>
            <span
              v-if="
                property.propertyType == 'image' ||
                property.propertyType == 'file'
              "
              >{{ property.fileName }}</span
            >
            <!-- 数组类型 用多选 -->
            <template v-if="property.propertyType == 'array'">
              <el-select
                v-model="property.propertyValue"
                multiple
                filterable
                allow-create
                default-first-option
                class="hide-select"
                popper-class="hide-always"
                placeholder="请输入属性值，回车确认添加一项"
                style="width: 80%"
              ></el-select>
              <el-tooltip content="当前属性为数组类型，输入一项后按回车继续">
                <i
                  class="el-icon-warning"
                  style="margin-left: 5px; font-size: 16px"
                ></i>
              </el-tooltip>
            </template>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetDialogForm">取 消</el-button>
        <el-button type="primary" @click="submitDialogForm">确 定</el-button>
      </div>
    </el-dialog>
    <SelectOntologyProp
      ref="selectOntologyPropRef"
      @select-property="selectPropertyVal"
    ></SelectOntologyProp>
  </div>
</template>

<script>
import SelectOntologyProp from "@/components/knowledgeManage/SelectOntologyProp.vue";
import { throttle } from "@/plugins/utils/index.js";
import navMenu from "@/views/server/knowledge-management/knowledgeBI/component/navMenu";
import selectCom from "./select/index.vue";
import { mapState } from "vuex";
import graphConfig from "@/components/drawerPanel/graphConfig.vue";

export default {
  components: {
    SelectOntologyProp,
    navMenu,
    selectCom,
    graphConfig,
  },
  props: {
    ontologyIdNew: {
      type: String,
      default: "",
    },
    entityId: {
      // 实体id
      type: String,
      default: "",
    },
    projectId: {
      // 本体id
      type: String,
      required: true,
      default: "",
    },
    Neo4j: {
      //neo4jid
      type: Object,
      default: () => {},
    },
  },
  watch: {
    entityId: {
      handler: function (val) {
        if (val) {
          this.getEntityDetail();
          this.isView = true;
        } else {
          this.form = {
            confidence: 1,
            details: "",
            entityName: "",
            ontologyName: [],
            entityStatus: 0, // 实体模态 0 文本 1 图片
            disambiguationIdentify: "",
            entityPropertyList: [],
            fileId: "",
            remark: [],
            ontologyId: "",
            targetNumber: "",
          };
          this.imgUrl = "";
          this.tableData = [];
        }
        this.tabs = "detail";
      },
      // immediate:true
    },
  },
  computed: {
    ...mapState({
      node_config_data: (state) => state.ontologyModel.node_config_data, // 节点数据
      edge_config_data: (state) => state.ontologyModel.edge_config_data, // 对私有属性 label 去重后的边数据
    }),
  },
  data() {
    return {
      propertyColor: "#F4D35E",
      propertyStyle: "15",
      tabs: "detail",
      isView: true,
      showSelectType: false,
      form: {
        confidence: 1, // 置信度
        details: "", // 详情
        entityName: "", // 实体name
        entityStatus: 0, // 实体模态 0 文本 1 图片
        ontologyName: [], // 实体列表name
        disambiguationIdentify: "", //消岐标识
        entityPropertyList: [], //属性列表
        fileId: "", // 图片url
        remark: [], // 消岐列表
        ontologyId: "",
        targetNumber: "", //标识码
      },
      isAll: false, // 简介是否展开全部
      tableData: [], // 原有的属性
      addEntityProperty: [], // 新增的属性
      editPropertyId: 0,
      dialogFormVisible: false,
      property: {
        // 属性
        propertyName: null, // 属性值名
        propertyValue: null, // 属性值
        propertyType: "", // 属性值类型
        startRange: "",
        endRange: "",
        coordX: "", //经度
        coordY: "", //维度
        // isPrivate: "1", //表示私有属性
      },
      propertyTypeOptions: [
        { key: "text", label: "字符串" },
        { key: "int", label: "整数值" },
        { key: "float", label: "浮点值" },
        { key: "date", label: "日期" },
        { key: "datetime", label: "日期时间" },
        { key: "coordinate", label: "坐标" },
        { key: "array", label: "数组" },
        { key: "image", label: "图片" },
        { key: "file", label: "文件" },
      ],
      propertyRules: {},
      title: "新增属性",
      optionsType: [],
      uploadUrl: this.$api.knowledgeMap.uploadUrl,
      imgUrl: "",
      entityType: "",
      propertyCon: [],
      optionsTypeId: "",
      entitySourceSize: 0, //来源数量
      entitySourceList: [],
      loading: false,
      editIsProperty: false,
      ontologyId: "",
      preOntologyName: [], // 保存上一次选择的实体类型
      isCancel: false,
      entity: false,
    };
  },
  mounted() {
    if (this.entityId) {
      this.getEntityDetail();
    }
    this.mapTree();
  },
  methods: {
    // 属性值类型
    validateType(rule, value, callback) {
      if (this.editIsProperty && !value) {
        callback(new Error("属性值类型不能为空"));
      } else {
        // 校验通过
        callback();
      }
    },
    pickerOptions(startRange, endRange) {
      return {
        disabledDate: (time) => {
          if (endRange && endRange != "" && startRange && startRange != "") {
            return (
              time.getTime() > new Date(endRange).getTime() ||
              time.getTime() < new Date(startRange).getTime()
            );
          }
        },
      };
    },
    setPropertyColor(val) {
      this.$refs.graphConfig.propertyColor = val;
      this.propertyColor = val;
    },
    setPropertyStyle(val) {
      this.$refs.graphConfig.propertyStyle = val;
      this.propertyStyle = val;
    },
    changePropertyColor(val) {
      this.$emit("changePropertyColor", val);
      this.propertyColor = val;
    },
    changePropertyStyle(val) {
      this.$emit("changePropertyStyle", val);
      this.propertyStyle = val;
    },
    // 设置节点文字大小
    changeNodeTextSize(val) {
      this.$emit("changeNodeTextSize", val);
    },
    // 设置边文字大小
    changeEdgeTextSize(val) {
      this.$emit("changeEdgeTextSize", val);
    },
    handleUploadChang(file) {
      let type = this.property.propertyType;
      const formData = new FormData();
      formData.append("file", file.raw);
      formData.append("pathType", type);
      this.$axios
        .post(this.$api.knowledgeMap.uploadEntityPropertyFile, formData)
        .then((res) => {
          if (res.status == 200) {
            // debugger;
            this.property.fileName = res.data.fileName;
            this.property.propertyValue = res.data.fileUrl;
            this.$message.success("上传成功");
            this.$forceUpdate();
          }
        });
    },
    handleExceed(file) {
      this.$nextTick(() => {
        this.$refs.uploadRef.clearFiles();
      });
      this.handleUploadChang(file[0]);
    },
    handleChange() {
      this.$forceUpdate();
    },
    validatePass(rule, value, callback) {
      if (
        this.property.propertyType &&
        this.property.propertyType == "coordinate"
      ) {
        // 属性值类型为坐标
        if (!this.property.coordX || !this.property.coordY) {
          callback(new Error("属性值不能为空"));
        } else {
          callback();
        }
      } else {
        if (value == "" || value == null) {
          callback(new Error("属性值不能为空"));
        } else {
          if (this.property.propertyType) {
            if (this.property.propertyBind == "no_bind") {
              callback();
            }
            if (this.property.propertyBind == "enum") {
              callback();
            }
            if (this.property.propertyBind == "range") {
              // 数字范围值 需要转换为number比较
              if (["int", "float"].includes(this.property.propertyType)) {
                if (
                  parseFloat(value) < parseFloat(this.property.startRange) ||
                  parseFloat(value) > parseFloat(this.property.endRange)
                ) {
                  callback(
                    new Error(
                      `属性值应在${this.property.startRange}~${this.property.endRange}之间`
                    )
                  );
                } else {
                  callback();
                }
              } else {
                if (
                  value < this.property.startRange ||
                  value > this.property.endRange
                ) {
                  callback(
                    new Error(
                      `属性值应在${this.property.startRange}~${this.property.endRange}之间`
                    )
                  );
                } else {
                  callback();
                }
              }
            }
            if (!this.property.propertyBind) {
              // 不要限制
              callback();
            }
          } else {
            callback();
          }
        }
      }
    },
    selectPropertyVal(val) {
      this.property = val;
      this.selectProperty = false;
    },

    // 修改属性名 应取消属性值组件的绑定约束
    changePropVal() {
      this.editIsProperty = true;
      if (this.property.propertyType) {
        for (let k in this.property) {
          if (!["propertyName", "propertyValue"].includes(k)) {
            delete this.property[k];
          }
        }
      }
    },
    changePropertyType(val) {
      if (["coordinate", "array", "image", "file"].includes(val)) {
        this.property.propertyBind = "no_bind";
        this.property.propertyBindDisabled = true;
      } else {
        this.property.propertyBindDisabled = false;
      }
      if (["date", "datetime", "int", "float"].includes(val)) {
        this.property.startRange = "";
        this.property.endRange = "";
        this.property.propertyValue = "";
      }
      // 切换为字符串类型时 如果已经选择了范围约束类型 则重置
      if (val === "text" && this.property.propertyBind === "range") {
        this.property.propertyBind = "no_bind";
      }
    },
    bindOntologyProp() {
      this.$refs.selectOntologyPropRef.show(this.oldOntologyId);
    },
    // 颜色配置修改
    saveConfig(eleLoading) {
      let nodes = this.node_config_data.map((node) => {
        let item = {
          id: node.ontologyId,
          color: node.color,
        };
        return item;
      });

      let edges = this.edge_config_data.map((edge) => {
        let item = {
          // id: edge.kgEntityRelationSpoId,
          id: edge.relationId,
          color: edge.color,
        };
        return item;
      });

      nodes.shift();
      edges.shift();
      let nodeParams = {
        projectId: this.projectId,
        param: nodes,
        propertyColor: this.propertyColor,
        propertyStyle: this.propertyStyle,
      };
      let edgeParams = {
        projectId: this.projectId,
        param: edges,
      };
      return Promise.all([
        this.updateNodeColor(nodeParams),
        this.updateEdgeColor(edgeParams),
      ])
        .then((res) => {
          this.$message.success("保存节点和连线颜色成功");
          eleLoading.close();
        })
        .catch((err) => {
          console.error(err);
          eleLoading.close();
        });
    },
    // 切换tab标签
    selectValue(val) {
      this.tabs = val;
    },
    // 更新节点颜色
    updateNodeColor(params) {
      return this.$axios
        .post(this.$api.knowledgeMap.bathSaveEntityColor, params)
        .then((res) => {
          let code = res.data.code;
          if (code !== 200) {
            let message = res.data.message;
            this.$message.warning(message);
            return false;
          }
        });
    },
    // 更新边颜色
    updateEdgeColor(params) {
      return this.$axios
        .post(this.$api.knowledgeMap.bathSaveRelationColor, params)
        .then((res) => {
          let code = res.data.code;
          if (code !== 200) {
            let message = res.data.message;
            this.$message.warning(message);
            return false;
          }
        });
    },
    // 配置
    changeGraphConfig(data) {
      this.$emit("changeGraphConfig", data);
    },
    // 获取实体详情
    getEntityDetail() {
      this.$axios
        .get(`${this.$api.knowledgeMap.entityDetail}/${this.entityId}`)
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            Object.assign(this.form, data);
            this.form.confidence = data.confidence ? data.confidence : 0;
            this.form.details = data.details;
            this.form.entityName = data.entityName;
            this.form.targetNumber = data.targetNumber;
            this.form.ontologyName = data.ontologyName;
            this.form.disambiguationIdentify = data.disambiguationIdentify;
            this.form.entityPropertyList = data.entityPropertyList;
            this.form.fileId = data.fileId;
            this.form.ontologyId = data.ontologyId;
            this.form.remark = data.disambiguationIdentify
              ? data.disambiguationIdentify.split(",")
              : [];
            this.tableData = data.entityPropertyList.map((ms) => {
              // debugger;
              Object.assign(ms, ms.ontologyProperty);
              return ms;
            });
            this.entitySourceSize = data.entitySourceSize;
            this.entitySourceList = data.entitySourceList;
            this.imgUrl = data.fileId ? "" : data.fileId;
            this.ontologyId = data.ontologyId;
          } else {
            this.$message.warning(message);
          }
        });
    },
    // 获取实体类型列表
    mapTree() {
      let params = {
        projectId: this.$store.state.knowledgeMap.projectMsg.projectId,
      };
      this.$axios
        .post(this.$api.knowledgeMap.mapTree, params)
        .then((res) => {
          const { data, message, code } = res.data;
          if (code == 200) {
            this.hideSubPanelData(data);
            this.optionsType = data;
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 删除children:[]项
    hideSubPanelData(obj) {
      if (Array.isArray(obj)) {
        obj.length > 0 &&
          obj.map((item) => {
            if (item.children.length === 0) {
              delete item.children;
            } else {
              this.hideSubPanelData(item.children);
            }
          });
      } else {
        this.$message.warning("数据格式出错");
      }
      return obj;
    },
    // 选中后关闭级联下拉框
    hidePanelDom(e) {
      // 更新实体类id
      this.oldOntologyId = e;
      if (this.tabs === "detail" && this.entityId) {
        this.form.ontologyName =
          this.$refs["myCascader1"].getCheckedNodes()[0].label;
        this.$refs.myCascader1.dropDownVisible = false;
      } else {
        this.form.ontologyName =
          this.$refs["myCascader"].getCheckedNodes()[0].label;
        this.$refs.myCascader.dropDownVisible = false;
      }
    },
    // 获取属性列表
    getProperty(id) {
      this.$axios
        .get(`${this.$api.knowledgeMap.getProperty}/${id}`)
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            this.propertyCon = data;
            this.propertyCon.forEach((item) => {
              if (!item.propertyValue) {
                this.$set(item, "propertyValue", "");
              }
              if (!item.isPrivate) {
                item["isPrivate"] = "0";
              }
            });
          }
        });
    },
    isDescriAll() {
      this.isAll = !this.isAll;
    },

    // 新增属性
    addProperty() {
      this.title = "新增属性";
      this.dialogFormVisible = true;
    },
    // 取消编辑
    resetDialogForm() {
      this.property = {
        propertyName: null, // 属性值名
        propertyValue: null, // 属性值
        propertyType: "", // 属性值类型
        startRange: "",
        endRange: "",
        coordX: "", //经度
        coordY: "", //维度
      };
      this.editIsProperty = false;
      this.dialogFormVisible = false;
      this.$refs.mydialogForm.resetFields();
    },
    // 提交编辑保存
    submitDialogForm() {
      this.$refs.mydialogForm.validate((valid) => {
        if (valid) {
          let middle = Object.assign({}, this.property);
          // 约束类型为数组时 值做JSON处理
          if (
            middle.propertyType === "array" &&
            Array.isArray(middle.propertyValue)
          ) {
            middle.propertyValue = JSON.stringify(middle.propertyValue);
          }
          // 坐标用,拼接
          if (middle.propertyType === "coordinate") {
            middle.propertyValue = middle.coordX + "," + middle.coordY;
          }
          if (this.title == "新增属性") {
            this.tableData.unshift(Object.assign({}, middle));
          } else {
            Object.assign(this.tableData[this.editPropertyId], middle);
          }
          this.property = {
            // 属性
            propertyName: null, // 属性值名
            propertyValue: null, // 属性值
            propertyType: "", // 属性值类型
            enumNames: [],
            startRange: "",
            endRange: "",
            propertyBind: "",
            measureUnit: "",
            coordX: "", //经度
            coordY: "", //维度
            isPrivate: "1", //"1"表示选择属性 "0"表示输入属性
          };
          this.editIsProperty = false;
          this.dialogFormVisible = false;
        }
      });
    },
    // 确定删除
    deleteConfirm(val, index) {
      // if (val.isPrivate == "1") {
      //   this.$message.warning("公有属性不可删除！");
      //   return;
      // }
      this.tableData.splice(index, 1);
    },
    deleteCancel() {},
    // 编辑属性
    nodeEditScope(val, index) {
      if (val.isPrivate == "0") {
        this.editIsProperty = true;
      }
      this.editPropertyId = index;
      this.title = "编辑属性";
      // 如果属性是 array类型 使用JSON转换属性值
      if (val.propertyType === "array") {
        try {
          let tmpVal = JSON.parse(val.propertyValue);
          Object.assign(this.property, val, { propertyValue: tmpVal });
        } catch {
          Object.assign(this.property, val, { propertyValue: [] });
        }
      } else {
        Object.assign(this.property, val);
        if (val.propertyType === "coordinate") {
          this.property.coordX = this.property.propertyValue.split(",")[0];
          this.property.coordY = this.property.propertyValue.split(",")[1];
        }
      }
      this.dialogFormVisible = true;
    },
    // 上传实体图片
    handleEntitySuccess(response, file, fileList) {
      const { code, message, data } = response;
      if (code === 200) {
        this.$message.success(message);
        this.form.entityName = data;
      } else {
        // this.$message.error(message);
        this.form.entityName = "";
      }
    },
    // 上传图片
    handleAvatarSuccess(response, file, fileList) {
      const { code, message, data } = response;
      if (code === 200) {
        this.$message.success(message);
        this.imgUrl = URL.createObjectURL(file.raw);
        this.form.fileId = data ? data : "";
      } else {
        // this.$message.error(message);
        this.form.fileId = "";
      }
    },
    beforeAvatarUpload() {},
    // 切换实体模态
    handleStatusChange() {
      this.form.entityName = "";
    },
    // 编辑私有属性
    editEntity() {
      this.oldOntologyId = this.form.ontologyId;
      this.isView = false;
    },
    // 监听级联下拉框修改
    cascaderChange() {
      this.form.ontologyName =
        this.$refs["myCascader"].getCheckedNodes()[0].label;
    },
    // 保存实体
    saveEntity() {
      if (this.tabs === "detail" && this.entityId) {
        if (
          this.form.entityName == "" ||
          this.$refs["myCascader1"].inputValue == "" ||
          this.$refs["myCascader1"].inputValue == null
        ) {
          this.$message.warning("请填写完整信息！");
          return;
        }
      } else {
        if (
          this.form.entityName == "" ||
          this.$refs["myCascader"].inputValue == "" ||
          this.$refs["myCascader"].inputValue == null
        ) {
          this.$message.warning("请填写完整信息！");
          return;
        }
      }
      if (this.form.confidence && !this.validConfidence(this.form.confidence)) {
        this.$message.warning("置信度只能是0或1或0~1之间的小数,小数最多四位");
        return;
      }
      this.form.entityPropertyList = this.tableData;
      this.form.disambiguationIdentify = this.form.remark.join(",");
      let params = {
        projectId: this.projectId,
        entityId: this.entityId,
        ...this.form,
      };
      console.log("params", params, this.form.targetNumber);
      if (this.entityId) {
        this.$axios
          .post(this.$api.knowledgeMap.updateEntity, params)
          .then((res) => {
            const { data, code, message } = res.data;
            if (code === 200) {
              this.isView = true;
              this.imgUrl = "";
              this.form.fileId = "";
              this.tableData = [];
              this.$emit("changeByNode", data);
              this.$message.success(message);
              this.getEntityDetail();
            } else {
              this.$message.error(message);
            }
          });
      } else {
        this.$axios
          .post(this.$api.knowledgeMap.addEntity, params)
          .then((res) => {
            const { data, code, message } = res.data;
            if (code === 200) {
              if (data) {
                this.$emit("changeByNode", data);
                this.tableData = [];
                this.$emit("addNewEntity", data.entity_id);
                this.imgUrl = "";
                this.form.fileId = "";
              }
              this.isView = true;
              this.$message.success(message);
            } else {
              this.$message.error(message);
            }
          });
      }
    },
    // 保存实体
    saveEntitythrottle() {
      this.Throttle(this);
    },
    // 各种取消
    cancelNewEntity() {
      this.$emit("cancelNewEntity");
    },
    Throttle: throttle((_this) => _this.saveEntity(), 300),
    isNumber(val) {
      var regPos = /^\d+(\.\d+)?$/; //非负浮点数
      var regNeg =
        /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
      if (regPos.test(val) || regNeg.test(val)) {
        return true;
      } else {
        return false;
      }
    },
    cancelUpload() {
      this.imgUrl = false;
      this.form.fileId = "";
      this.$refs.upload.clearFiles();
    },
    // 消岐删除
    deleteRemark(index) {
      this.form.remark.splice(index, 1);
    },
    // 新增消岐
    addRemark() {
      let remarkItem = "";
      this.form.remark.push(remarkItem);
    },
    // 删除图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    formatCheck(value) {
      if (!/^(0|1|(0\.\d{1,4}))$/g.test(value)) {
        this.$message.warning("置信度只能是0或1或0~1之间的小数,小数最多四位");
      }
    },
    validConfidence(val) {
      if (!/^(0|1|(0\.\d{1,4}))$/g.test(val)) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../../assets/scss/scroll";
/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  padding: 0;
  border: 0;
  background: 0;
}
.entity-view-component {
  width: 424px;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #333333;

  .content-style {
    height: 32px;
    border-radius: 2px;
    display: inline-block;
    width: 196px;
    padding-left: 10px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #f3f4f8;
  }

  .text-all {
    text-align: left;
  }

  /deep/el-table .cell.el-tooltip {
    text-align: center;
  }

  .view-detail,
  .view-select,
  .view-config {
    height: calc(100% - 60px);
    padding: 0;
    box-sizing: border-box;
    .name,
    .model {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;

      span {
        margin-right: 10px;
      }

      .haddle {
        color: $--color-primary;
        cursor: context-menu;
      }

      .name-content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 32px;
        line-height: 32px;
      }

      .name-remark {
        margin-bottom: 14px;
      }

      .remark-item-con {
        width: 72px;
        height: 32px;
        background: #f3f4f8;
        border-radius: 2px;
        margin-right: 16px;
        margin-bottom: 12px;
        padding: 0 10px;
        line-height: 32px;
      }

      .remark-edit-con {
        width: 92px;
        height: 32px;
        line-height: 32px;

        /deep/ .el-input__suffix {
          right: 0;
        }

        /deep/ .el-input__inner {
          padding-right: 20px;
          padding-left: 8px;
        }

        /deep/ .el-input__icon {
          line-height: 32px;
        }
      }
    }
    .entity {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;

      span {
        margin-right: 40px;
      }

      .haddle {
        color: $--color-primary;
        cursor: context-menu;
      }

      .name-content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 32px;
        line-height: 32px;
      }

      .name-remark {
        margin-bottom: 14px;
      }

      .remark-item-con {
        width: 72px;
        height: 32px;
        background: #f3f4f8;
        border-radius: 2px;
        margin-right: 16px;
        margin-bottom: 12px;
        padding: 0 10px;
        line-height: 32px;
      }

      .remark-edit-con {
        width: 92px;
        height: 32px;
        line-height: 32px;

        /deep/ .el-input__suffix {
          right: 0;
        }

        /deep/ .el-input__inner {
          padding-right: 20px;
          padding-left: 8px;
        }

        /deep/ .el-input__icon {
          line-height: 32px;
        }
      }
    }

    .entity-edit {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      .edit-inner {
        display: flex;
        align-items: center;
        .name-edit-input {
          width: 196px;
          margin-right: 10px;
          /deep/ .el-input__inner {
            height: 32px;
            box-shadow: none;
            border-radius: 2px;
          }
        }
      }
    }
    .name-edit {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;

      .name-edit-input {
        width: 196px;
        margin-right: 10px;
        /deep/ .el-input__inner {
          height: 32px;
          box-shadow: none;
          border-radius: 2px;
        }
      }
    }

    .confidence-edit {
      span {
        margin-right: 24px;
      }

      .confidence-edit-input {
        width: 196px;
        margin-right: 10px;

        /deep/ .el-input__inner {
          height: 32px;
          box-shadow: none;
          border-radius: 2px;
        }
      }
    }

    .details-edit {
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      span {
        width: 86px;
        margin-bottom: 14px;
      }
    }

    .content-remark {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .remark-item {
        display: flex;
        align-items: center;
      }

      .remark {
        margin-right: 16px;
        margin-bottom: 12px;

        /deep/ .el-input__inner {
          height: 32px;
          box-shadow: none;
        }
      }

      .add-remark {
        margin-bottom: 10px;
      }
    }

    .type,
    .confidence,
    .picture {
      margin-bottom: 20px;
      height: 32px;
      line-height: 32px;

      span {
        margin-right: 10px;
      }

      .title {
        margin-bottom: 14px;
      }
    }

    .type-edit {
      .el-cascader {
        height: 32px;
        width: 196px;
        line-height: 32px;

        /deep/ .el-input__inner {
          height: 32px;
          border-radius: 2px;
          box-shadow: none;
        }

        /deep/ .el-input__icon {
          line-height: 26px;
        }
      }
    }
    .entity {
      text-align: left;
      position: relative;

      .title {
        margin-bottom: 10px;
      }

      .cancelUpload {
        position: absolute;
        bottom: 62px;
        left: 70px;
        color: #ee5564;
        transform: scale(0.9);
      }

      .reupload {
        position: absolute;
        bottom: 0px;
        left: 86px;
      }

      /deep/ .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        // overflow: hidden;
      }

      /deep/ .avatar-uploader .el-button--small {
        padding: 6px 6px;
      }

      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 72px;
        height: 72px;
        line-height: 72px;
        text-align: center;
      }

      .avatar {
        width: 72px;
        height: 72px;
        display: block;
      }
    }
    .picture {
      height: 120px;
      text-align: left;
      position: relative;

      .title {
        margin-bottom: 10px;
      }

      .cancelUpload {
        position: absolute;
        bottom: 62px;
        left: 70px;
        color: #ee5564;
        transform: scale(0.9);
      }

      .reupload {
        position: absolute;
        bottom: 0px;
        left: 86px;
      }

      /deep/ .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        // overflow: hidden;
      }

      /deep/ .avatar-uploader .el-button--small {
        padding: 6px 6px;
      }

      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 72px;
        height: 72px;
        line-height: 72px;
        text-align: center;
      }

      .avatar {
        width: 72px;
        height: 72px;
        display: block;
      }
    }

    .details {
      margin-bottom: 14px;

      .descri {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .all {
        font-size: 12px;
        color: $--color-primary;
        cursor: context-menu;
      }
    }

    .property {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }

  .view-config {
    padding: 0;
  }

  .content-key {
    width: 100%;
  }

  .table {
    /deep/ .cell {
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 auto;
    }

    /deep/ th {
      border: 1px solid #ebeef5;
    }

    /deep/ td {
      border: 1px solid #ebeef5;
    }

    /deep/ .el-table__cell {
      padding: 0;
      height: 36px;
    }
  }

  .source {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    // .download {
    //     color: #3A58B9;
    // }

    // .download:hover {
    //     cursor: pointer;
    // }
    .file_name {
      flex-grow: 9;
    }

    .operation {
      flex-grow: 1;
      display: flex;
      justify-content: space-between;

      .download {
        color: #3a58b9;
      }

      .download:hover {
        cursor: pointer;
      }
    }
  }

  .view-detail-content {
    height: calc(100% - 32px);
    margin-bottom: 20px;
    padding: 16px;
  }

  .btn {
    height: 32px;
    background: #4b71eb;
    border-radius: 2px;
    border: 1px solid #4b71eb;
    line-height: 32px;
    text-align: center;
    cursor: context-menu;
    margin: 0 16px 16px 16px;
    box-sizing: border-box;
    color: #ffffff;
  }

  .btn-edit {
    background: #ffffff;
    color: #4b71eb;
    cursor: pointer;
  }

  .vertial-center {
    display: flex;
    align-items: center;
  }

  .property-table {
    /deep/ .el-table__body-wrapper {
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 8px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #b7bbc7;
        border-radius: 6px;
      }

      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #ffffff;
      }

      .el-table__body {
        width: 376px !important;
      }
    }

    /deep/ .gutter {
      background: rgba(61, 96, 212, 0.12);
    }

    /deep/ .el-table__fixed-right-patch {
      background: rgba(61, 96, 212, -0.88);
    }
  }

  .details-edit {
    /deep/ .el-textarea__inner {
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 6px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #b7bbc7;
        border-radius: 6px;
      }

      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #ffffff;
      }

      .el-table__body {
        width: 376px !important;
      }
    }
  }
}

.map-dialog {
  .form-select {
    width: 100%;
  }

  .form-link {
    line-height: initial;
  }

  /deep/ .el-dialog__header {
    border-bottom: 2px solid #e5e6e9;
  }

  /deep/ .el-dialog__body {
    padding-bottom: 0;
  }
}

.common-dialog {
  /deep/ .el-dialog {
    border-radius: 4px;
  }

  /deep/ .el-dialog__header {
    padding: 20px;
    padding-left: 32px;
  }

  /deep/ .el-dialog__title {
    font-size: 18px;
    font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
    font-weight: bold;
    color: #333333;
  }

  /deep/ .el-dialog__body {
    padding: 42px 60px 0 60px;
  }

  /deep/ .el-input__inner {
    height: 32px;
  }

  /deep/ .el-form-item__label {
    color: #333333;
  }

  /deep/ .el-button {
    width: 68px;
    height: 32px;
    padding: 6px;
    margin-left: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 0;
  }

  /deep/ .el-form-item__content {
    margin-left: 60px;
  }
}
</style>
